<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
    <meta keywords="">
    <title>404</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/swiper.min.css">
    <script src="../assets/lib/jquery.min.js"></script>
    <style type="text/css">
    .error_404{
        text-align: center;
        padding:25px 10%;
    }
    .error_404 img{
        width: 100%; 
    }
    .error_m{
        margin-top:25px;
    }
    .error_m p{
        color: #0c7dc1;
        line-height: 1.6em;
        font-size: 0.8em;
        text-align: left;
    }
    .error_m p.error_t{
        font-size: 1.2em;
        margin-bottom:5px;
    }
    .error_bt{
        text-align: center;
        margin-top:20px;
    }
     .error_bt a{
        background: #0c7dc1;
        border-radius: 4px;
        border:0px;
        display: inline-block;
        color: #fff;
        padding:8px 0px;
        margin-left:5px;
        font-size: 0.6em;
        width:104px;
     }
    </style>
</head>

<body class="pdb50">
    <!-- <div class="filter-blur"></div> -->
    <!-- 顶部 start -->
    <div class="g-top clearfix fn-psr">
        <a href="index.html" class="ui-logo  fn-lt">
            <span class="icons-logo"></span>
            <span>微商城</span>
        </a>
        <div class="m-search-wrap  fn-psr">
            <form action="" id="" class="m-search clearfix fn-rt index">
                <input type="text" id="J_search_input" class="ui-search fn-psa" placeholder="搜索商品名称">
                <input type="button" id="J_search_btn" class="ui-search-btn icons-search fn-psa">
                <!-- 筛选 首页不要筛选按钮-->
                <!-- <a  class="off-search fn-rt">取消</a> -->
                <!-- 删除输入 -->
                <span class="close-search icons-close-s fn-psa" id="J_clear_search"></span>
            </form>
        </div>
    </div>
    <!-- 顶部 end -->

    <!-- 404 start -->
    <div class="error_404">
        <img src="../assets/img/404.png">
        <div class="error_m">
            <p class="error_t">抱歉！您所要访问的页面不存在。</p>
            <p>您要查看的网址可能已经删除或者暂时不可用。</p>
            <p>点击以下按钮继续浏览网站。</p>
            <div class="error_bt">
                <a href="#">返回商城首页</a>
                <a href="#">返回上一级页面</a>
            </div>
        </div>  
    </div>
    <!-- 404 end -->

    <!-- 底部导航 start -->
    <ul class="footer-nav clearfix bdt">
        <li>
            <a href="#" class="current">
                <span class="nav-icons icon-home "></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="month-list.html">
                <span class="nav-icons icon-rakings"></span>
                <p>排行榜</p>
            </a>
        </li>
        <li>
            <a href="shopping-order.html">
                <span class="shop-num">99</span>
                <span class="nav-icons icon-shopping"></span>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="user-center.html">
                <span class="nav-icons icon-user"></span>
                <p>个人中心</p>
            </a>
        </li>
    </ul>
    <!-- 底部导航 end -->
    <!-- 返回顶部 -->
    <div id="scrollTop" class="icons-s-top"></div>
    <script src="../assets/common/public.js"></script>
    <script src="../assets/lib/swiper.min.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: false,
        autoplayDisableOnInteraction:false,
        spaceBetween: 0,
        autoplay: 2500,
        centeredSlides: true,
        loop:true
    });
    //改变搜索框的宽度
    var windowWidth = $(".g-top").width();
    var logoWidth = $(".ui-logo").width();
    $(".m-search-wrap").width((windowWidth - logoWidth - 30) + "px");
    //点击搜索弹出键盘的时候,不让底部工具栏上移.只能隐藏了,其他方法都不可行
    $("#J_search_input").focus(function() {
        $(".footer-nav").hide();
    });
    //失去焦点的时候仍然最底部显示
    $("#J_search_input").blur(function() {
        $(".footer-nav").show();
    });
    //滚动的时候仍然最底部
    $(window).scroll(function() {
        $(".footer-nav").show();
    });
    </script>
</body>

</html>
